{% extends 'base.html' %}
{% from 'bootstrap/pagination.html' import render_pagination %}
{% from 'bootstrap/form.html' import render_form, render_field %}

{% block title %}{{ post.author.name }}的相册{% endblock %}

{% block content %}
    {#    文章详情#}
    <div class="page-header">
        <h1>{{ post.title }}
            {# 文章标题的右边 #}
            <span class="float-right">
                    {% if current_user == post.author or current_user.can('MODERATE') %}
                        {# 编辑文章 #}
                        <a class="btn btn-info btn-sm" href="{{ url_for('user.edit_post', post_id=post.id) }}">编辑</a>
                        {# 删除文章 #}
                        <a class="btn btn-danger btn-sm text-white" data-toggle="modal" data-target="#confirm-delete"
                           data-href="{{ url_for('user.delete_post', post_id=post.id, next=url_for('main.index')) }}">删除</a>
                    {% endif %}
                </span>
        </h1>
        <small>
            分类: <a
                href="{{ url_for('main.show_category', category_id=post.category.id) }}">{{ post.category.name }}</a><br>
            日期: {{ moment(post.timestamp).format('LL') }}
        </small>
    </div>
    <div class="row">
        <div class="col-sm-8">
            {# 展示post中的post内容 #}
            {{ post.body | safe }}
            <hr>
            {# 分享文章链接 #}
            <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target=".postLinkModal">分享
            </button>
            {#    展示举报功能    #}
            {% if current_user.is_authenticated and current_user != post.author %}
                <form class="inline" method="post" action="{{ url_for('main.report_post', post_id=post.id) }}">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <button type="submit" class="btn btn-link btn-sm">举报</button>
                </form>
            {% endif %}
            {#  分享链接时弹出页面 #}
            <div class="modal fade postLinkModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">有关链接</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group">
                                <input type="text" class="form-control"
                                       _external=True会显示完整的URL
                                       value="{{ url_for('main.show_post', post_id=post.id, _external=True) }}"
                                       readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {# 展示评论 #}
            {% include 'main/_comment.html' %}
        </div>
        <div class="col-sm-4 sidebar">
            {#            渲染右上角的小卡片#}
            {% include "main/_sidebar.html" %}
            {# 文章收藏 #}
            {% include 'main/_post_sidebar.html' %}
        </div>
    </div>

    {# 删除文章的确认框 #}
    {% if current_user.is_authenticated %}
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel">删除确认框</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body">
                        <p>你想删除这个项目吗?</p>
                    </div>
                    <div class="modal-footer">
                        <form class="delete-form" action="" method="post">
                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button class="btn btn-danger btn-confirm" type="submit">确认删除</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}
